import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import HomeView from '../views/home/Home.vue'
import KindView from '../views/kind/index.vue'
import CartView from '../views/cart/index.vue'
import MyView from '../views/my/index.vue'
import FooterCom from '@/components/FooterCom.vue'
import { useUserInfoStore } from '@/stores/user'
const routes = [
  {
    path: '/',
    // 路由重定向
    // 进入到某个路径后，指定跳转到某一个路径中
    // 一般会用在子路由的配置
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'home',
    components: {
      default: HomeView,
      footer: FooterCom
    },
    // 路由元信息，可以做权限或者做条件使用
    meta: {
      isShow: true,
      title: '首页'
    },
    // 路由的独享守卫，只有在进入当前路由的时候才会执行
    beforeEnter: (to: any, from: any) => {
      console.log('独享守卫被执行了');
      // reject the navigation
      // return false
    },
  }, {
    path: '/kind',
    name: 'kind',
    components: {
      default: KindView,
      footer: FooterCom
    },
    meta: {
      isShow: true,
      title: '分类'
    }
  }, {
    path: '/cart',
    name: 'cart',
    components: {
      default: CartView,
      footer: FooterCom
    },
    meta: {
      isShow: true,
      title: '购物车'
    }
  }, {
    path: '/my',
    name: 'my',
    components: {
      default: MyView,
      footer: FooterCom
    },
    meta: {
      isShow: true,
      title: '我的'
    }
  },
  {
    path: '/detail',
    name: 'detail',
    meta: {
      title: '详情'
    },
    component: () => import('../views/detail/index.vue'),
    // 路由的独享守卫，只有在进入当前路由的时候才会执行
    beforeEnter: (to: any, from: any, next: any) => {
      const userInfo = useUserInfoStore()
      if (userInfo.userinfo.token) {
        next()
      } else {
        next('/login')
      }
    },
  },
  {
    path: '/login',
    name: 'login',
    meta: {
      title: '登录'
    },
    component: () => import('../views/login/index.vue'),
  }, {
    path: '/register',
    name: 'register',
    meta: {
      title: '注册'
    },
    redirect: '/register/step1',
    component: () => import('../views/register/index.vue'),
    children: [
      {
        path: 'step1',
        name: 'step1',
        component: () => import('../views/register/step1.vue'),
      },
      {
        path: 'step2',
        name: 'step2',
        component: () => import('../views/register/step2.vue'),
      },
      {
        path: 'step3',
        name: 'step3',
        component: () => import('../views/register/step3.vue'),
      }
    ]
  },
  {
    path: '/order/:orderid',
    name: 'order',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/order/index.vue'),
  },
  {
    path: '/live',
    name: 'live',
    // route level code-splitting
    // this generates a separate chunk (About.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/live/index.vue'),
  },
  {
    // 配置 404 页面
    path: '/:pathMatch(.*)*',
    name: 'NotFound',
    component: () => import('../views/error/index.vue'),
  },

]
// createWebHashHistory
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

/*
  路由守卫：

  全局守卫：
    1. 前置守卫
    2. 解析守卫
    3. 后置守卫

  独享守卫
    beforeEnter 进入之前执行


  组件内的守卫
    选项式API有3个
      export default {
        beforeRouteEnter(to, from) {
          // 在渲染该组件的对应路由被验证前调用
          // 不能获取组件实例 `this` ！
          // 因为当守卫执行时，组件实例还没被创建！
        },
        beforeRouteUpdate(to, from) {
          // 在当前路由改变，但是该组件被复用时调用
          // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
          // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
          // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
        },
        beforeRouteLeave(to, from) {
          // 在导航离开渲染该组件的对应路由时调用
          // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
        },
      }


    组合式API有2个
    路由更新了
    onBeforeRouteUpdate
    离开路由了
    onBeforeRouteLeave

*/

// 前置守卫，会在页面跳转之前执行
// next 是放行函数，可以进行页面跳转
router.beforeEach((to, from, next) => {
  // ...
  // to 将要进入的页面
  // from 从那个页面来
  // console.log(to, from, next);

  const userinfo = useUserInfoStore()
  // [].indexOf(to.path)
  if (to.path == '/my' || to.path == '/a') {
    // 要进入我的页面，判断是否登录
    if (userinfo.userinfo.token) {
      // 登录了
      next()
    } else {
      // 没有登录
      next('/login')
    }
  } else {
    next()
  }


  // 返回 false 以取消导航
  // return false
})


// 路由的解析守卫，会在每次跳转页面时执行，跟前置的区别是调用时机不同
// 前置先调，解析守卫刚好会在导航被确认之前、所有组件内守卫和异步路由组件被解析之后调用。
router.beforeResolve(async to => { })

// 路由的后置守卫，会在页面跳转之后执行
router.afterEach((to, from) => {
  // 修改标题
  document.title = String(to.meta.title)
})

export default router
